<template>
    <div>
        <h2>会员信息录入</h2>
        <table>
            <tr>
                <td>会员卡号</td>
                <td><input type="text" v-model="state.mCardNum" /></td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input type="text" v-model="state.phone" /></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td><input type="text" v-model="state.name" /></td>
            </tr>
            <tr>
                <td>证件类型</td>
                <td><select v-model="state.cardType">
                        <option>身份证 </option>
                        <option>护照 </option>
                    </select></td>
            </tr>
            <tr>
                <td>证件号</td>
                <td><input type="text" v-model="state.idCard" /></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="text" v-model="state.address" /></td>
            </tr>
            <tr>
                <td>民族</td>
                <td><input type="text" v-model="state.minZhu" /></td>
            </tr>
            <tr>
                <td>会员等级</td>
                <td><select v-model="state.mDengJi" >
                        <option>白银会员 </option>
                        <option>黄金会员 </option>
                        <option>白金会员 </option>
                        <option>钻石会员 </option>
                        <option>黑卡会员 </option>
                    </select></td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input type="text"  v-model="state.birthday"/></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="r1" v-model="state.sex" />男
                    <input type="radio" name="r1"  v-model="state.sex"/>女
                </td>
            </tr>
            <tr>
                <td>时间</td>
                <td><input type="date" v-model="state.date" /></td>
            </tr>
            <tr>
                <td></td>
                <td><button @click="add">新增</button></td>
            </tr>
        </table>
    </div>
</template>23

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
let data = reactive({
    state: {
        mCardNum: "",
        phone: "",
        name: "",
        cardType: "",
        idCard: "",
        address: "",
        minZhu: "",
        mDengJi: "",
        birthday: "",
        sex: "",
        date: "",
    }
})
let {state}=toRefs(data)

const add=()=>{
    if(state.value.phone==""){
        alert("手机号不能为空")
        return;
    }
    if(state.value.name==""){
        alert("姓名不能为空")
        return;
    }
    if(state.value.idCard.length!=18){
        alert("2.会员身份证号必须18位")
        return;
    }
    let obj={
        id: 0,
  mCardNum: state.value.mCardNum,
  phone: state.value.phone,
  name: state.value.name,
  cardType: state.value.cardType,
  idCard: state.value.idCard,
  address: state.value.address,
  minZhu: state.value.minZhu,
  mDengJi: state.value.mDengJi,
  birthday: state.value.birthday,
  sex: state.value.sex,
  date: state.value.date,
  money: 100
    }
    axios({
        url:'/api/Member/MemberAdd',
        method:'post',
        data:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data==1){
            alert("添加成功")
            router.push("/list")
        }
        else{
            alert("添加失败")
            return;
    }})
    .catch(err=>{
        console.log(err)
    })
}
</script>

<style scoped></style>